<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>个人页面</title>
    <link rel="stylesheet" href="static/css/pc/minCss/all.min.css" />

    <!--IE浏览器运行最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="static/css/pc/minCss/bootstrap.min.css" />
    <link rel="stylesheet" href="static/css/pc/minCss/all.min.css" />

    <!--[if lt IE 9]>
    <script src="static/js/pc/dest/html5shiv.min.js"></script>
    <script src="static/js/pc/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="header" style="height: 78px;"></div>

<div id="per-wall" class="pt25">
    <div class="left" style="width: 310px;">
        <iframe src="_personal-left.html" frameborder="0" width="310" height="1135" scrolling="no" style="margin-top: -30px; "></iframe>
    </div>
    <div class="per-wall-r">
        <!--收入、支出、总金额-->
        <div class="tribe-finance">
            <ul>
                <li class="tribe-finance-income">
                    <p class="tribe-finance-num">10000元</p>
                    <p class="tribe-finance-name">累计收入</p>
                </li>
                <li class="tribe-finance-expend">
                    <p class="tribe-finance-num">10000元</p>
                    <p class="tribe-finance-name">累计支出</p>
                </li>
                <li class="tribe-finance-amount">
                    <p class="tribe-finance-num">100000元</p>
                    <p class="tribe-finance-name">总金额</p>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--浏览数量-->
        <div class="tribe-artWork">
            <ul>
                <li>
                    <p class="tribe-artWorkName tribe-artWorkNameBg1">作品浏览数</p>
                    <p class="tribe-artWorkNum">120</p>
                    <p class="tribe-artWorkToday">总浏览数</p>
                </li>
                <li class="ml10 mr10">
                    <p class="tribe-artWorkName tribe-artWorkNameBg2">需求总浏览量</p>
                    <p class="tribe-artWorkNum">70</p>
                    <p class="tribe-artWorkToday">今日浏览:6</p>
                </li>
                <li>
                    <p class="tribe-artWorkName tribe-artWorkNameBg3">服务总浏览量</p>
                    <p class="tribe-artWorkNum">210</p>
                    <p class="tribe-artWorkToday">今日浏览:20</p>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--天气、评价、充值提现-->
        <div class="tribe-perInfo">
            <div class="tribe-weather">
                <img src="./static/images/pc/personal/weather.jpg" height="146" width="112" alt=""/>
                <div class="tribe-weather-info">
                    <p class="tribe-f1">北京市</p>
                    <p class="tribe-f2">2016.6.27</p>
                    <p class="tribe-f1 mt25">晴间多云</p>
                    <p class="tribe-f2">23℃-31℃</p>
                </div>
            </div>
            <div class="tribe-evaluate">
                <p class="tribe-evaluate-desc">服务提供综合评价<span class="pl10">4.0</span>分</p>
                <p class="tribe-evaluate-start">
                    <span class="yellow"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
                <p class="tribe-evaluate-desc pt5">需求发布综合评价<span class="pl10">3.0</span>分</p>
                <p class="tribe-evaluate-start">
                    <span class="yellow"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </p>
            </div>
            <div class="tribe-money">
                <div class="tribe-recharge">
                    <a href="">充值</a>
                </div>
                <div class="tribe-withdrawal">
                    <a href="">提现</a>
                </div>
            </div>

        </div>
        <div class="clear"></div>
        <!--作品数量-->
        <div class="tribe-artWorkNum">
            <ul>
                <li class="tribe-artWorkNum1">
                    <a href="1" target="_blank"></a>
                    <p class="tribe-artWorkNumP1">3000</p>
                    <p class="tribe-artWorkNumP2">图片</p>
                </li>
                <li class="tribe-artWorkNum2">
                    <a href="2" target="_blank"></a>
                    <p class="tribe-artWorkNumP1">200</p>
                    <p class="tribe-artWorkNumP2">视频</p>
                </li>
                <li class="tribe-artWorkNum3">
                    <a href="3" target="_blank"></a>
                    <p class="tribe-artWorkNumP1">800</p>
                    <p class="tribe-artWorkNumP2">音频</p>
                </li>
                <li class="tribe-artWorkNum4">
                    <a href="4" target="_blank"></a>
                    <p class="tribe-artWorkNumP1">64</p>
                    <p class="tribe-artWorkNumP2">文字</p>
                </li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="per-reqBox">



            <div class="per-req tribe-req">
                <!-- Nav tabs -->
                <div class="tribe-req-nav">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">参加的需求</a></li>
                        <li role="presentation">
                            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">发布的需求</a>
                        </li>
                    </ul>
                </div>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!--参加的需求-->
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <ul>
                            <li>
                                <div class="per-reqTit">
                                    <h1>
                                        <a href="#" target="_blank">需求名称需求名称需求名...</a>
                                    </h1>
                                    <p>酬金：<span>1000元</span></p>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqCon">
                                    <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                                    <div class="per-reqInfo">
                                        <p>征集作品</p>
                                        <ul>
                                            <li class="per-req-people">10人参加</li>
                                            <li class="per-req-bzj">已交保证金</li>
                                            <li class="per-req-time">20天19小时</li>
                                        </ul>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqStatus">
                                    <p>已征用/已选稿</p>
                                    <ul>
                                        <li class="per-reqStaBtn"><button class="btn-yellow-50">完成交稿</button></li>
                                        <li class="per-reqStaEdit"><a href="#" target="_blank">申诉</a></li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear per-reqLine"></div>
                            </li>
                            <li>
                                <div class="per-reqTit">
                                    <h1>
                                        <a href="#" target="_blank">需求名称需求名称需求名...</a>
                                    </h1>
                                    <p>酬金：<span>1000元</span></p>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqCon">
                                    <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                                    <div class="per-reqInfo">
                                        <p>征集作品</p>
                                        <ul>
                                            <li class="per-req-people">10人参加</li>
                                            <li class="per-req-bzj">已交保证金</li>
                                        </ul>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqStatus">
                                    <p>已征用/已选稿</p>
                                    <ul>
                                        <li class="per-reqStaEdit"><a href="#" target="_blank">申诉</a></li>
                                        <li class="per-reqStaEdit"><a href="#" target="_blank">待评价</a></li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear per-reqLine"></div>
                            </li>
                            <li>
                                <div class="per-reqTit">
                                    <h1>
                                        <a href="#" target="_blank">需求名称需求名称需求名...</a>
                                    </h1>
                                    <p>酬金：<span>1000元</span></p>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqCon">
                                    <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                                    <div class="per-reqInfo">
                                        <p>征集作品</p>
                                        <ul>
                                            <li class="per-req-people">10人参加</li>
                                            <li class="per-req-bzj">已交保证金</li>
                                        </ul>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqStatus">
                                    <p>已关闭</p>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear per-reqLine"></div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                        <div id="page"></div>
                    </div>

                    <!--发布的需求-->
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <ul>
                            <li>
                                <div class="per-reqTit">
                                    <h1>
                                        <a href="#" target="_blank">需求名称需求名称需求名...</a>
                                    </h1>
                                    <p>酬金：<span>1000元</span></p>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqCon">
                                    <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                                    <div class="per-reqInfo">
                                        <p>征集作品</p>
                                        <ul>
                                            <li class="per-req-people">10人参加</li>
                                            <li class="per-req-bzj">已交保证金</li>
                                            <li class="per-req-time">20天19小时</li>
                                        </ul>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqStatus">
                                    <p>已征用/已选稿</p>
                                    <ul>
                                        <li class="per-reqStaBtn"><button class="btn-yellow-50">确认收稿</button></li>
                                        <li class="per-reqStaEdit ml20"><a href="#" target="_blank">关闭需求</a></li>
                                        <li class="per-reqStaEdit"><a href="#" target="_blank">申诉</a></li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear per-reqLine"></div>
                            </li>
                            <li>
                                <div class="per-reqTit">
                                    <h1>
                                        <a href="#" target="_blank">需求名称需求名称需求名...</a>
                                    </h1>
                                    <p>酬金：<span>1000元</span></p>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqCon">
                                    <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                                    <div class="per-reqInfo">
                                        <p>征集作品</p>
                                        <ul>
                                            <li class="per-req-people">10人参加</li>
                                            <li class="per-req-bzj">已交保证金</li>
                                        </ul>
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div class="per-reqStatus">
                                    <p>待付款</p>
                                    <ul>
                                        <li class="per-reqStaBtn"><button class="btn-yellow-50">付款</button></li>
                                    </ul>
                                    <div class="clear"></div>
                                </div>
                                <div class="clear per-reqLine"></div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                        <div id="page2"></div>
                    </div>
                </div>


            </div>
            <div class="per-req tribe-ser">
                <ul>
                    <li>
                        <p class="tribe-share" data-toggle="modal" data-target="#myModal"><a href="javascript:;">分享</a></p>
                        <div class="clear"></div>
                        <div class="per-reqTit">
                            <h1>
                                <a href="#" target="_blank">服务名称服务名称服务名称服务名称...</a>
                            </h1>
                            <p>形象设计:<span>1000元/个</span></p>
                            <div class="clear"></div>
                        </div>
                        <div class="per-reqCon">
                            <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                        </div>
                        <div class="per-reqStatus">
                            <p>
                                <span class="per-serBlue mr43">收到邀请：123次</span>
                                <span class="per-serYellow">接受邀请：123次</span>
                            </p>
                            <ul>
                                <li class="per-reqStaEdit"><a href="#" target="_blank">删除</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="clear per-reqLine"></div>
                    </li>
                    <li>
                        <p class="tribe-share" data-toggle="modal" data-target="#myModal"><a href="javascript:;">分享</a></p>
                        <div class="clear"></div>
                        <div class="per-reqTit">
                            <h1>
                                <a href="#" target="_blank">服务名称服务名称服务名称服务名称...</a>
                            </h1>
                            <p>形象设计:<span>1000元/个</span></p>
                            <div class="clear"></div>
                        </div>
                        <div class="per-reqCon">
                            <h3>需求说明：这里显示的是需求的说明这里显示的是需求的说明这里显示的是需求的...</h3>
                        </div>
                        <div class="per-reqStatus">
                            <p>
                                <span class="per-serBlue mr43">收到邀请：123次</span>
                                <span class="per-serYellow">接受邀请：123次</span>
                            </p>
                            <ul>
                                <li class="per-reqStaEdit"><a href="#" target="_blank">删除</a></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                        <div class="clear per-reqLine"></div>
                    </li>
                </ul>
                <div class="clear"></div>
                <div id="page1"></div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer"></div>

<!-- 分享（Modal） -->
<div class="modal fade" id="myModal"  aria-hidden="true">
    <button type="button" class="close zcbl-close" data-dismiss="modal" aria-hidden="true"></button>
    <div class="zcbl-modal-share">
        <h2 class="zcbl-modal-shareTit">分享</h2>
        <p class="zcbl-modal-shareDesc">让更多的人了解你，让更多的人帮助你</p>
        <div class="zcbl-modal-shareImg">
            <ul>
                <li class="zcbl-modal-shareSina">
                    <a href=""></a>
                </li>
                <li class="zcbl-modal-shareWx">
                    <div class="zcbl-modal-shareWxMin">
                        <a href="javascript:;"></a>
                    </div>
                    <div class="zcbl-modal-shareWxMax"><img src="./static/images/pc/index/QR_CODE.jpg" height="115" width="115" alt=""></div>

                </li>
                <li class="zcbl-modal-shareQQ">
                    <a href=""></a>
                </li>
            </ul>
            <div class=""></div>
        </div>
    </div>
</div>
<!-- 分享（Modal） -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="static/js/pc/dest/jquery-1.11.3.min.js"></script>
<script src="static/js/pc/dest/all.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/js/pc/dest/bootstrap.min.js"></script>
<script>
    $(function(){
        $("#page1").load("./_page.html");
        $("#page2").load("./_page.html");
    });

    //    分享--点击微信效果
    $(".zcbl-modal-shareWx").click(function(){
        if($(".zcbl-modal-shareWxMax").css('display') == 'none'){
            $(".zcbl-modal-shareWxMin").hide();
            $(".zcbl-modal-shareSina a").hide();
            $(".zcbl-modal-shareQQ a").hide();
            $(".zcbl-modal-shareWxMax").show();
        }else{
            $(".zcbl-modal-shareWxMin").show();
            $(".zcbl-modal-shareSina a").show();
            $(".zcbl-modal-shareQQ a").show();
            $(".zcbl-modal-shareWxMax").hide();
        }

    });
</script>


</body>
</html>